<template>
  <div class="app-wrapper">
    <div class="content">
      <div class="title">编辑分包商</div>
      <div class="main">
        <el-form ref="createList" :model="createList" :rules="createListRules" auto-complete="on" label-position="left">
          <div class="tab">
            <div class="row">
              <label>分包商名称</label>
              <el-form-item prop="name">
                <el-input
                  ref="name"
                  v-model="createList.name"
                  placeholder="请输入分包商名称"
                  type="text"
                  name="name"
                  tabindex="1"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>分包商类型</label>
              <el-form-item prop="type">
                <el-select
                  v-model="createList.type"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in typeStatusList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>具体产品或事物</label>
              <el-form-item prop="orther">
                <el-input
                  ref="orther"
                  v-model="createList.orther"
                  placeholder="请输入具体产品或事物"
                  type="text"
                  name="orther"
                  tabindex="2"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>负责人</label>
              <el-form-item prop="contactsName">
                <el-input
                  ref="contactsName"
                  v-model="createList.contactsName"
                  placeholder="请输入负责人名称"
                  type="text"
                  name="contactsName"
                  tabindex="3"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>负责人联系方式</label>
              <el-form-item prop="contactsPhone">
                <el-input
                  ref="contactsPhone"
                  v-model="createList.contactsPhone"
                  placeholder="请输入负责人联系方式"
                  type="text"
                  name="contactsPhone"
                  tabindex="4"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="imgtitle row">
              <label>合同附件</label>
              <div style="margin-top: 8px;">
                <!-- <el-form-item ref="upImg" prop="linaFiles"> -->
                <el-form-item prop="linaFiles">
                  <el-upload
                    ref="upload"
                    class="upload-demo"
                    :action="pathUrl+'/file/contract'"
                    :with-credentials="true"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :limit="1"
                    :file-list="createList.linaFiles"
                    multiple
                    :on-exceed="handleExceed"
                    :on-success="successData"
                  >
                    <span class="addbtn">附件上传</span>
                  </el-upload>
                </el-form-item>
              </div>
              <!-- <div class="addbtn">
                <div @click="downFile">附件下载</div>
              </div> -->
              <!-- <div style="margin: 20px 0 0 0;">
                <el-form-item>
                  <el-upload
                    :action="pathUrl+'/file/doc'"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </div> -->
            </div>
          </div>
          <div v-if="createList.linaFiles.length>0" class="tab">
            <div class="imgtitle row" @click="downFile">
              <span class="addbtn">附件下载</span>
            </div>
          </div>

          <div class="btnsubmit">
            <el-button
              type="primary"
              class="create"
              @click.native.prevent="submitData"
            >编辑</el-button>
            <el-button
              type="primary"
              class="cancel"
              @click="comeBack"
            >取消</el-button>
          </div>

        </el-form>
      </div>
    </div>

  </div>
</template>

<script>

import { deleteFiles } from '@/api/file'
import { getSubcontractorType, detailSubcontractor, updataSubcontractor } from '@/api/subcontractor'

export default {
  name: 'EdgeSubcontractor',
  components: {
  },
  data() {
    return {
      pathUrl: process.env.VUE_APP_BASE_API,
      createList: {
        type: '',
        name: '',
        orther: '',
        contactsPhone: '',
        contactsName: '',
        linaFiles: []
      },
      // 上传图片
      imagerType: ['image/jpeg', 'image/gif', 'image/bmp', 'image/png', 'image/jpg'],
      createListRules: {
        type: [
          { required: true, message: '必选', trigger: 'change' }
        ],
        name: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        orther: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        contactsPhone: [
          { required: true, message: '必填', trigger: 'change' },
          { pattern: /^1[34578]\d{9}$/, message: '手机号格式错误' }
        ],
        contactsName: [
          { required: true, message: '必填', trigger: 'change' }
        ]
        // linaFiles: [
        //   { required: true, message: '请上传附件', trigger: 'change' }
        // ]
      },
      loading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      typeStatusList: []
    }
  },
  computed: {

  },
  mounted() {
    this.detailData()
    this.subcontractorStatus()
  },
  methods: {
    comeBack() {
      this.$router.go(-1)
    },
    // 获取类型
    async subcontractorStatus() {
      const res = await getSubcontractorType()
      if (res.code === 200) {
        this.typeStatusList = res.data
      }
    },
    // 详情
    async detailData() {
      const id = this.$route.query.id
      const res = await detailSubcontractor(id)
      if (res.code === 200) {
        this.createList = res.data
        if (this.createList.linaFiles === null) {
          this.createList.linaFiles = []
        }
      }
    },
    // 下载
    downFile() {
      const id = this.createList.linaFiles[0].id
      var url = this.pathUrl + '/file/' + id
      window.open(url)
    },
    successData(response, file, fileList) {
      if (response.code === 200) {
        // this.$refs.upImg.clearValidate()
        this.createList.linaFiles.push(response.data)
        this.$message({
          type: 'success',
          message: '附件上传成功!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      } else {
        this.linaFiles = []
        this.$refs.upload.clearFiles()
        this.$message({
          type: 'error',
          message: '附件上传失败!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message({
        type: 'error',
        message: '只能上传一个附件',
        showClose: true,
        center: true,
        duration: 2 * 1000
      })
    },
    // 图片上传
    handleAvatarSuccess(res, file, fileList) {
      // this.createList.progressNodeList[index].imageUrl = URL.createObjectURL(file.raw)
      if (res.code === 200) {
        console.log()
      } else {
        this.$message({
          type: 'error',
          message: res.msg || 'error',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
    },
    beforeAvatarUpload(file) {
      // eslint-disable-next-line no-unneeded-ternary
      const isJPG = this.imagerType.indexOf(file.type) !== -1
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message({
          type: 'error',
          message: '上传图片只能是 JPG 格式!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
      if (!isLt10M) {
        this.$message({
          type: 'error',
          message: '上传图片大小不能超过 10MB!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
      return isJPG && isLt10M
    },
    async handleRemove(file, fileList) {
      const id = file.id
      const res = await deleteFiles(id)
      if (res.code === 200) {
        this.createList.linaFiles.splice(this.createList.linaFiles.findIndex(item => item.id === id), 1)
        this.$message({
          type: 'success',
          message: '附件删除成功!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      } else {
        console.log('附件删除失败!')
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    submitData() {
      this.$refs.createList.validate(valid => {
        if (valid) {
          this.loading = true
          updataSubcontractor(this.createList).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '编辑成功!',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
              this.$router.push({ name: 'Subcontractor' })
            } else {
              this.$message({
                type: 'error',
                message: res.msg || 'error',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$color:rgba(247,181,0,1);
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
      .title{
        padding: 30px 0 20px 34px;
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
      }
      .main{
        margin: 24px 128px 0 41px;
        padding-bottom: 25px;
        .tab{
          display: flex;
          margin-bottom: 20px;
          .row{
            flex: 1;
            margin-right: 30px;
            .el-form-item{
              width: 350px;
            }
            label{
              font-size:14px;
              font-weight:400;
              color:rgba(247,181,0,0.8);
           }
           .el-input{
              margin: 8px 0 0 0;
           }
           .el-textarea{
             margin: 8px 0 0 0;
             background: transparent;
           }
           .el-select{
              display: block;
              margin: 8px 0 0 0;
           }
           .block{
             margin: 8px 0 0 0;
           }
          }
        }
      }
      .btnsubmit{
        text-align: center;
        margin-top: 60px;
        .create{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 4px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          width:60px;
          height:32px;
          margin-right: 5px;
          background:#F7B500;
        }
        .cancel{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 4px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          width:60px;
          height:32px;
          background:#F7B500;
          opacity:0.4;
        }
      }
    }
  }
  .imgtitle{
    font-size: 14px;
    font-weight: 400;
    color: rgba(247,181,0,.8);
    .addbtn{
      margin: 10px 0 0 0;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255,255,255,.8);
      cursor: pointer;
      padding: 8px;
      height: 38px;
      text-align: center;
      line-height: 34px;
     background: #F7B500;
    }
  }
</style>
